<template>
  <el-date-picker style='width: 100%'
    :value="value"
    @input="$emit('input', $event)"
    @change="change"
    @blur="blur"
    @focus="focus"
    :type="type"
    align="left" unlink-panels
    :clearable='clearable'
    :editable='clearable'
    range-separator="至" 
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :format="format"
    :value-format='valueFormat'
    :picker-options="pickerOptions">
  </el-date-picker>
</template>
<script>
  import { getDay } from '@/utils/ptkc.js'
  export default {
    props: {
      value: '',
      clearable: { // 清除按钮
        type: Boolean,
        default: false
      },
      clearable: {
        type: Boolean,
        default: false
      },
      // defaultTime: {
      //   type: Array,
      //   default: () => ['00:00:00', '23:59:59']
      // },
      format: {
        type: String,
        default: 'yyyy-MM-dd'
      },
      valueFormat: {
        type: String,
        default: 'yyyy-MM-dd HH:mm:ss'
      },
      type: {
        type: String,
        default: 'daterange'
      },
      disabledDate: {
        type: Function,
        default: time => {
          return time.getTime() > Date.now()
        }
      },
      shortcutsDiy: { // 自定义快捷内容
        type: Boolean,
        default: false
      },
      shortcuts: { // 快捷方式
        type: Array,
        default: () => []
      }
    },
    computed: {
      pickerOptions() {
        const picker = { disabledDate: this.disabledDate }
        if (this.shortcutsDiy) {
          picker.shortcuts = this.shortcuts
        } else {
          if (this.shortcuts.length) {
            picker.shortcuts = this.shortcuts.map(i => {
              return {
                text: i.text,
                onClick(picker) {
                  picker.$emit('pick', [getDay(i.start) + ' ' + '00:00:00', getDay(i.end) + ' ' + '23:59:59'])
                }
              }
            })
          }
        }
        return picker  
      }
    },
    methods: {
      change() {
        this.$emit('change', this.value)
      },
      focus() {
        this.$emit('focus')
      },
      blur() {
        this.$emit('blur')
      }
    }
  }
</script>